<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
        </div>
        <div class="nav" v-if="isShow">
            <div class="return">
                <span class="arrow"></span>
                <span class="back" v-on:click="back()">返回</span>
            </div>
            <div class="nav_text">
                <p>销售出库</p>
            </div>
        </div>
        <div class="pop" v-if="check_num">
            <div class="check_num">
                <div class="title_pop">
                    <p>{{detail_inp.invname}}</p>
                    <p>应发数量：{{detail_inp.noutnum}}</p>
                </div>
                <div class="margin">
                    <span style="display:inline;font-size:13px;margin-left:-20px">拣货数量</span><input type="number" style="width:110px;margin-left:10px" placeholder='输入实发数量' v-model="model[0].pop_inp" />
                </div>

                <button class="affirm" @click="queding">确认</button>
                <button class="cancel" @click="quxiao">取消</button>

            </div>
            <div class="mask"></div>
        </div>
        <div class="div" v-if="isShow">
            <div class="title scan_" @click="ckScan()">
                <div class="btn">
                    <p>扫描商品条码</p>
                </div>
            </div>
            <div class="img" v-if="is_scan">
                <input class="is_search" v-focus="is_scan" @blur="is_blur()" @keyup='change_inp($event)' v-model='inp_val' />
            </div>
            <div class="body">
                <ul>
                    <li>
                        <span class="left">单&ensp;据&ensp;号：</span>
                        <span class="right">{{goods.billcode}}</span>
                    </li>
                    <li>
                        <span class="left">单据日期：</span>
                        <span class="right">{{goods.dbilldate}}</span>
                    </li>
                    <li>
                        <span class="left">客户名称：</span>
                        <span class="right">{{goods.custname}}</span>
                    </li>
                    <li>
                        <span class="left">拣货状态：</span>
                        <span class="right" v-if="goods.status != null &&  goods.status != 'DONE'">未完成</span>
                        <span class="right" v-else>已完成</span>
                    </li>
                </ul>
            </div>
            <div class="detail">
                <!-- <ul v-for="item in detail_list" :key="item.id" @click="prompt(item)"> -->
                <ul v-for="item in detail_list" :key="item.id" @click="pro(item)">
                    <li>
                        <span class="left">商品编码：</span>
                        <span class="right">{{item.invcode}}</span>
                    </li>
                    <li v-show="item.invname.length < 19">
                        <span class="left">商品名称：</span>
                        <span class="right">{{item.invname}}</span>
                    </li>
                    <li v-show="item.invname.length >= 19">
                        <span class="left">商品名称：</span>
                        <p class="right_">{{item.invname}}</p>
                    </li>

                    <li >
                        <span class="left">货位编码：</span>
                        <span class="right">{{item.cscode}}</span>
                    </li>
                    <li v-show="item.csname">
                        <span class="left">货位名称：</span>
                        <span class="right">{{item.csname}}</span>
                    </li>
                    <li>
                        <span class="left">计量单位：</span>
                        <span class="right">{{item.measname}}</span>
                    </li>
                    <li>
                        <span class="left">应发数量：</span>
                        <span class="right">{{item.noutnum}}</span>
                    </li>
                    <li>
                        <span class="left">已拣数量：</span>
                        <span class="right">{{item.realnum|| 0}}</span>
                    </li>
                </ul>
            </div>

            <div class="zhanwei"></div>
            <div class="btnContainer" v-show="goods.status != 'DONE' && goods.status != null">
                <button type="submit" class="SubmitBtn" v-on:click="saveFood('TODO')">商品暂存</button>
                <button type="submit" class="SubmitBtn" v-on:click="checkJ('DONE')">拣货确认</button>
            </div>
        </div>

    </div>
</template>
<script>
import smalloading from "./../loading/smalloading";
export default {
  name: "delivery",
  data() {
    return {
      check_num: false,
      model: [{ pop_inp: 0 }],
      detail_inp: "",
      goods: {},
      detail_list: [],
      billcode_: "",
      isModal: true,
      inp_val: "",
      is_scan: false,
      isShow: false
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      this.$router.push({ path: "/DeliveryScan" });
    },
    pro: function(res) {
      this.check_num = true;
      this.detail_inp = res;
      this.model[0].pop_inp = res.noutnum;
    },
    quxiao: function() {
      this.check_num = false;
      this.model[0].pop_inp = 0;
    },
    queding: function() {
      let res = this.detail_inp;
      let v = this.model[0].pop_inp;
      if (v - 0 > res.noutnum - 0) {
        this.$layer.alert("当前数量大于总量");
        return;
      }
      this.detail_list.map(item => {
        if (item.invcode.includes(res.invcode)) {
          item.realnum = v;
        }
      });
      this.check_num = false;
    },
    prompt(res) {
      this.$prompt("", {
        title: res.invname + " 应发数量" + res.noutnum,

        placeholder: "输入实发数量",
        value: res.noutnum
      }).then(v => {
        /***************************************************** */
        if (v == "" || !Number(v)) {//判断空 或者 不是数字类型
          this.$layer.alert("输入有误");
          return;
        }
        if(parseInt(v) != (v - 0)){//判断小数时
          this.$layer.alert("输入有误");
          return;
        }
        if ((v - 0) < 0 ) {//判断小于0时候
          this.$layer.alert("输入有误");
          return;
        }
        /******************************************************* */
        if (v - 0 > res.noutnum - 0) {
          this.$layer.alert("当前数量大于总量");
          return;
        }
        this.detail_list.map(item => {
          if (item.invcode.includes(res.invcode)) {
            item.realnum = v;
          }
        });
        this.is_scan = true; //继续显示扫描窗体
      });
    },
    load_list: function(invcode) {
      //billcode : XC1311180010
      this.billcode_ = sessionStorage.getItem("qrcode");
      this.$http
        .post("api/motor/queryOutStoreBill", { billcode: this.billcode_ })
        .then(
          res => {
            this.isModal = false;
            sessionStorage.removeItem("deliveryId");
            let result = res.data;
            console.log(result);
            if (result.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (result.rtcode == 1) {
              this.isShow = true;
              this.goods = result;
              this.detail_list = result.detail_list;
            }
            if (result.rtcode == 2) {
              //DeliveryScan
              let this_ = this;
              let rot = this.$router;
              this_.$layer.alert(result.rtmsg, function() {
                this_.$layer.close(this.id);
                rot.push({ path: "/DeliveryScan" });
              });
              return;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    checkJ: function(e) {
      //拣货确认
      //判断商品拣货数量是否匹配
      let this_ = this;
      let num = 0;
      for (let l = 0; l < this_.detail_list.length; l++) {
        let item__ = this_.detail_list[l];
        if (item__.noutnum != item__.realnum) {
          num = num + 1;
        }
      }
      if (num > 0) {
        // this.$layer.alert("拣货数量与应发数量不匹配");
        // return;
        this_.$layer.confirm("拣货数量与应发数量不匹配", function() {
          this_.$layer.close(this.id);
          // this_.WriteBackOutBill(e, "end");
        });
      } else {
        this_.WriteBackOutBill(e, "end");
      }
    },
    saveFood: function(e) {
      //商品占存
      //判断数量是否大于
      for (let l = 0; l < this.detail_list.length; l++) {
        let item__ = this.detail_list[l];
        if (item__.noutnum < item__.realnum) {
          this.$layer.alert("拣货数量大于应发数量，请重新拣货");
          return;
        }
      }
      this.WriteBackOutBill(e, "save");
    },
    WriteBackOutBill: function(e, re_) {
      this.isModal = true;
      //签字确认 修改为 修改状态
      this.$http
        .post("api/motor/WriteBackOutBill", {
          billcode: this.billcode_,
          // hts: this.goods.hts,
          details: this.detail_list,
          status: e
        })
        .then(
          res => {
            this.isModal = false;
            let result = res.data;
            if (result.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (result.rtcode == 2) {
              let this_ = this;
              this_.$layer.alert(result.rtmsg, function() {
                this_.$layer.close(this.id);
                this_.$router.push({ path: "/Nav" });
              });
              return null;
            }
            if (result.rtcode == 1) {
              let this_ = this;
              let message_ = "";
              if (re_ == "save") {
                message_ = "保存成功";
              }
              if (re_ == "end") {
                message_ = "领料确认成功";
              }
              this_.$layer.alert(message_, function() {
                this_.$layer.close(this.id);
                this_.$router.push({ path: "/Nav" });
              });
              return;
            }
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    ckScan: function() {
      this.is_scan = true;
    },
    change_inp: function(ev) {
      let this_ = this;
      if (ev.keyCode == 13) {
        setTimeout(function() {
          this_.is_scan = false;
          let ite = null;
          for (let i = 0; i < this_.detail_list.length; i++) {
            let item = this_.detail_list[i];
            if (item.invcode == this_.inp_val) {
              ite = item; //item.noutnum;
            }
          }
          if (ite == null) {
            this_.$layer.alert("该发货单不存在，请确认后再扫", function() {
              this_.$layer.close(this.id);
              this_.inp_val = "";
            });
          }
          this_.inp_val = "";
          this_.prompt(ite);
        }, 100);
        return;
      }
    },
    is_blur: function() {
      this.is_scan = false;
      this.inp_val = "";
    }
  },
  created: function() {
    let invcode = sessionStorage.getItem("invcode");
    this.load_list(invcode);
  }
};
</script>

<style lang="css" scoped >
.pop_width {
  width: 300px;
}

.title_pop {
  font-size: 1.3rem;

  margin-top: 1rem;
}

.title_pop p {
  word-wrap: break-word;
  margin: 0.5rem 1rem 0 1rem;
  padding-left: 15px;
}

.margin {
  margin-top: 1rem;
  text-align: center;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  margin-top: 40%;
  border-radius: 0.5rem;
}

.check_num label {
  font-size: 15px;
}

.check_num input {
  width: 80%;
  font-size: 15px;
  height: 3rem;
  padding-left: 4%;
  margin-top: 5px;
  border: 1px solid #d3dce6;
  border-radius: 6px;
  background: #f9fafc;
}

.check_num span {
  font-size: 15px;
  text-align: -webkit-center;
  display: -webkit-box;
}

.affirm {
  display: inline-block;
  background: #668292;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 2.7rem;
  outline: none;
  font-size: 1.5rem;
}

.cancel {
  display: inline-block;
  background: #fff;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: 1px solid #668292;
  color: #668292;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.is_search {
  width: 85%;
  height: 50px;
  border: 1px solid gray;
  padding: 10px;
  font-size: 20px;
  border-radius: 5px;
  margin-top: 6%;
}

.img img {
  width: 26rem;
}

.img {
  border-radius: 5px;
  width: 100%;
  height: 20%;
  position: fixed;
  z-index: 100;
  margin-top: 8rem;
  text-align: center;
  background-color: #ebebeb;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 60% auto;
  z-index: 100;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  width: 44%;
  padding-left: 1.5rem;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  width: 100%;
  position: fixed;
  z-index: 33;
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.div {
  padding-top: 4.1rem;
}

.scan_ {
  position: fixed;
  width: 100%;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}

.title {
  padding-top: 1rem;
  height: 5rem !important;
  background: #fff;
  box-shadow: 0px 3px 5px #999;
  text-align: center;
}

.btn {
  height: 2.5rem;
  width: 80% !important;
  background: #fcfcfc;
  border: 1px solid #dcdada;
  border-radius: 1rem;
  color: #49a1de;
  line-height: 1rem;
  font-size: 1.2rem;
  margin-top: 0.2rem;
}

.btn p {
  font-weight: bold !important;
}

.scan_ :active {
  background-color: #668292;
  color: #fff;
}

.body {
  margin-top: 5rem;
  background: #fff;
}

.body ul {
  margin: 0 1rem;
}

.body :last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .right {
  float: right;
}

.right_ {
  /* float: right; */
  width: 220px;
  word-break: break-all;
  display: inline-flex !important;
}

.foodname {
  height: auto;
  width: 65%;
  background-color: blanchedalmond;
}

.li_div {
  width: 100%;
  height: auto;
}

.btnContainer {
  padding-bottom: 3rem;
  width: 100%;
  position: fixed;
  bottom: 5%;
  text-align: center;

  padding: 0.83rem 0;
}

.btnContainer .SubmitBtn {
  display: inline-block;
  background: #668292;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  outline: none;
  margin: 0 1rem;
  font-size: 1.5rem;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.mar {
  width: 65%;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.detail .left {
  padding: 0 1rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 10px;
}

.zhanwei {
  width: 80%;
  height: 100px;
}
</style>

